<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!--    <link rel="stylesheet" href="css/viewStudent.css">-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- 引入http-vue-loader -->
    <script src="https://unpkg.com/http-vue-loader"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-row>
        <el-upload
                class="upload-demo"
                action="answer/answer"
                :on-remove="handleRemove1"
                :before-remove="beforeRemove1"
                multiple
                :on-change="onchange1"
                :on-success="success1"
                :file-list="answerfileList">
            <el-button size="small" type="primary">点击上传查看详情.HTML</el-button>
            <div slot="tip" class="el-upload__tip">上传查看详情.HTML文件保存搜不到的题</div>
        </el-upload>
    </el-row>
    <el-row>
        <el-upload
                class="upload-demo"
                action="answer"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple
                :on-change="onchange"
                :on-success="success"
                :file-list="fileList">
            <el-button size="small" type="primary">点击上传整卷预览.HTML</el-button>
            <div slot="tip" class="el-upload__tip">将整卷预览.HTML文件上传查看解析</div>
        </el-upload>
    </el-row>

    <el-collapse v-model="activeNames">
        <el-collapse-item :name="index" v-for="(item,index) in listDate" :key="index">
            <template slot="title"><h3 class="mark_name colorDeep el-collapse-item-title">
                {{item.title}}
            </h3>
            </template>
            <h3 v-if="item.answer.length===0" class="mark_name colorDeep el-collapse-item-title">
                暂无答案请上传查看详情.html更新答案</h3>
            <aa v-if="item.answer.length!==0" :item="item.answer[0]"
                :key="item.id"></aa>
        </el-collapse-item>
    </el-collapse>
</div>


</body>

<script>

    Vue.use(httpVueLoader)
    new Vue({
        el: '#app',
        components: {
            'aa': httpVueLoader("aa.vue")
        },
        data() {
            return {
                activeNames: [],
                answerfileList: [],
                tableData: [{}, {}],
                listDate: [],
                fileList: []
            }
        },
        methods: {
            onchange(file, fileList) {
                fileList = []
                this.fileList = []
                this.fileList.push(file)
            },
            onchange1(file, fileList1) {
                fileList1 = []
                this.answerfileList = []
                this.answerfileList.push(file)
            },
            success(res) {
                this.tableData = res
                this.listDate = res
                this.fileList = []
                for (i = 0; i < res.length; i++) {
                    this.activeNames.push(i)
                }
            }, success1(res) {
                this.answerfileList = []
            }

        }
    })
</script>
<style>
    .el-collapse-item-title {
        width: 90%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
</html>



